<template>
	<view class="">
		<view class="top"></view>
		<view class="main">
			<view class="title">
				{{miantitle}}
			</view>
			<view class="list">
				<view class="list-view">
					小区名称：
				</view>
				<view style="padding-right: 88rpx;">
					<input type="text" placeholder="请输入小区名称" :value="allsubit.r_homename" v-model="allsubit.r_homename" />
				</view>
			</view>
			<view class="list">
				<view class="list-view">
					水电气卡号：
				</view>
				<view style="padding-right: 88rpx;">
					<input type="text" placeholder="请输入水电气卡号" :value="allsubit.r_cardid" v-model="allsubit.r_cardid" />
				</view>
			</view>
			<view class="list">
				<view class="list-view">
					水电气类型：
				</view>
				<view style="padding-right: 88rpx;">
					<input readonly="readonly" type="text" placeholder="请输入水电气类型" :value="allsubit.show_pay_variety" v-model="allsubit.show_pay_variety" @click="showselects()"/>
				</view>
				<u-select v-model="showselect" :list="list" @confirm="confirm"></u-select>
			</view>
		</view>

		<view class="bottom" @click="subit()" id="buttomName" v-if="showBottom">
			{{subitName}}
		</view>
	</view>
</template>

<script>
	// import {
	// 	pathToBase64,
	// 	base64ToPath
	// } from 'image-tools'
	export default {
		data() {
			return {
				showBottom:true,
				ysbase64: '',
				miantitle: '新增住户',
				showselect:false,
				list:[],
				allsubit: {},
				subitName: '确认提交',
				mainmsg: '',
				token: ''
			}
		},
		onLoad: function(options) {
			this.mainmsg = uni.getStorageSync('mainmsg');
			this.token = uni.getStorageSync('token');
			console.log(this.token)
			if (options.id) {
				this.miantitle = '住户详情'
				this.subitName = '修改'
				let data = {
					'Id': options.id
				}
				let _this = this
				_this.showBottom = false
				uni.request({
					url: _this.$title + 'AppUserFeatures/GetMyHome',
					data: data,
					header: {
						'auth': _this.token
					},
					success: (res) => {
						if (res.data.status === 200) {
							_this.allsubit = res.data.data
							console.log(res)
							uni.request({
								url: _this.$title + 'payment/GetPayVariety',
								method: 'POST',
								header: {
									'auth': _this.token,
									'Content-Type': 'application/json; charset=utf-8'
								},
								success: (res) => {
									if (res.statusCode === 200) {
										console.log(res.data)
										for(let i = 0;i<res.data.length;i++){
											if(res.data[i].num == _this.allsubit.pay_variety){
												_this.allsubit.show_pay_variety = res.data[i].title
												this.$set(_this.allsubit)
											}
										}
									} else {
										uni.showToast({
											icon: "none",
											title: '请求失败'
										})
									}
								}
							});
						} else {
							uni.showToast({
								icon: "none",
								title: res.data.message
							})
						}
					}
				});
			}
		},

		onUnload: function() {

		},
		methods: {
			confirm(e){
				this.allsubit.show_pay_variety = e[0].label
				this.allsubit.pay_variety = e[0].value
			},
			showselects(){
				uni.hideKeyboard();
				let _this = this
				uni.request({
					url: _this.$title + 'payment/GetPayVariety',
					method: 'POST',
					header: {
						'auth': _this.token,
						'Content-Type': 'application/json; charset=utf-8'
					},
					success: (res) => {
						console.log(res)
						if (res.statusCode === 200) {
							_this.list = res.data
							 for(let i = 0 ;i<_this.list.length;i++){
								 _this.list[i].value = _this.list[i].num
								 _this.list[i].label = _this.list[i].title
							 }
							 this.showselect = true
						} else {
							uni.showToast({
								icon: "none",
								title: '请求失败'
							})
						}
					}
				});
			},
			subit() {
				if (this.subitName === '已提交成功') {
					return
				}
				
				if(!this.allsubit.r_homename){
					uni.showToast({
						icon: "none",
						title: '请输入小区名称'
					})
					return
				}
				
				if(!this.allsubit.r_cardid){
					uni.showToast({
						icon: "none",
						title: '请输入水电气卡号'
					})
					return
				}
				
				if(!this.allsubit.show_pay_variety){
					uni.showToast({
						icon: "none",
						title: '请选择水电气类型'
					})
					return
				}
				
				let _this = this
				
					_this.allsubit.AppUserInfoId = _this.mainmsg.Id
					console.log(_this.allsubit)
					uni.request({
						// url: _this.$title + 'AppUserFeatures/AddMyStoreInfo?st_type=' + _this.allsubit
						// 	.st_type + '&st_storename=' + _this.allsubit.st_storename +
						// 	'&st_addr=' + _this.allsubit.st_addr + '&st_man=' + _this.allsubit
						// 	.st_man + '&st_tel=' + _this.allsubit.st_tel + '&st_img_photo1=' +
						// 	_this.allsubit.st_img_photo1 + '&st_img_photo2=' + _this.allsubit
						// 	.st_img_photo2 + '&st_img_photo3=' + _this.allsubit.st_img_photo3 +
						// 	'&st_sfz=' + _this.allsubit.st_sfz + '&st_img_sfz1=' + _this
						// 	.allsubit.st_img_sfz1 + '&st_img_sfz2=' + _this.allsubit
						// 	.st_img_sfz2 + '&st_yhcard=' + _this.allsubit.st_yhcard +
						// 	'&st_img_yhcard=' + _this.allsubit.st_img_yhcard + '&st_khyh=' +
						// 	_this.allsubit.st_khyh + '&remark=' + _this.allsubit.remark +
						// 	'&plp_storecode=' + _this.allsubit.plp_storecode +
						// 	'&AppUserInfoId=' + _this.allsubit.AppUserInfoId,
						// method: 'GET',
						url: _this.$title + 'AppUserFeatures/AddMyHome',
						method: "POST",
						data: _this.allsubit,
						header: {
							'auth': _this.token,
							'Content-Type': 'application/json; charset=utf-8'
						},
						success: (res) => {
							console.log(res)
							if (res.data.status === 200) {
								uni.showToast({
									icon: "none",
									title: res.data.message
								})
								_this.subitName = '已提交成功'
								// var div = document.getElementById(
								// 	'buttomName');
								// div.setAttribute("class",
								// 	"bottom-after");
							} else {
								uni.showToast({
									icon: "none",
									title: '提交失败'
								})
							}
						}
					});

			}
		}
	}
</script>

<style>
	/* .content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	} */

	.top {
		width: 100%;
		height: 12rem;
		background-color: #18ab4e;
		border-bottom-left-radius: 1rem;
		border-bottom-right-radius: 1rem;
	}

	.main {
		/* position: relative; */
		background-color: white;
		margin: 0 auto;
		margin-top: -7rem;
		padding-bottom: 2rem;
		width: 88vw;
		box-shadow: 0px 0px 0.625rem #eaeaea;
		z-index: 1000;
		border-radius: 1.625rem;
	}

	.main2 {
		/* position: relative; */
		background-color: white;
		margin: 0 auto;
		margin-top: 2rem;
		padding-bottom: 2rem;
		width: 88vw;
		box-shadow: 0px 0px 0.625rem #eaeaea;
		z-index: 1000;
		border-radius: 1.625rem;
	}

	.list2 {
		/* position: relative; */
		/* padding-top: 4.5rem; */
		display: flex;
		justify-content: space-between;
		margin-left: 3vw;
		margin-right: 3vw;
		font-size: medium;
		border-bottom: 1px solid #ABB1BA;
		height: 5rem;
		line-height: 3.5rem;
		font-weight: 500;
	}

	.list2-title {
		display: flex;
		justify-content: space-between;
		margin-left: 3vw;
		margin-right: 3vw;
		font-size: small;
		height: 1rem;
		line-height: 3.5rem;
		font-weight: 500;
	}


	.title {
		/* position: relative; */
		padding-top: 4rem;
		text-align: center;
		font-size: x-large;
		font-weight: 400;
	}

	.list {
		/* position: relative; */
		/* padding-top: 4.5rem; */
		display: flex;
		justify-content: space-between;
		margin-left: 3vw;
		margin-right: 3vw;
		font-size: medium;
		border-bottom: 1px solid #ABB1BA;
		height: 3.5rem;
		line-height: 3.5rem;
		font-weight: 500;
	}

	.list-last {
		/* position: relative; */
		/* padding-top: 4.5rem; */
		/* display: flex; */
		justify-content: space-between;
		margin-left: 3vw;
		margin-right: 3vw;
		font-size: medium;
		float: right;
		/* border-bottom: 1px solid #ABB1BA; */
		height: 1rem;
		line-height: 3.5rem;
		font-weight: 500;
	}

	.list-view {
		width: 250rpx;
		white-space: nowrap;
	}

	.list-car {
		display: flex;
		justify-content: space-between;
	}

	input {
		height: 3.5rem;
		line-height: 3.5rem;
		font-weight: 500;
		font-size: medium;
		border: 0;
		outline: none;
		background-color: rgba(0, 0, 0, 0);
		width: 40vw;
	}

	.face {
		background-color: white;
		margin: 0 auto;
		margin-top: 1rem;
		height: 5rem;
		width: 88vw;
		box-shadow: 0px 0px 0.625rem #eaeaea;
		z-index: 1000;
		border-radius: 1.625rem;
		display: flex;
		justify-content: space-between;
	}

	.canvas-bg {
		/* margin: 0 auto; */
		/* margin-top: 1rem; */
		height: 88vw;
		width: 88vw;
		float: left;
		/* box-shadow: 0px 0px 0.625rem #55ffff; */
		/* z-index: 1000; */
		/* border-radius: 1.625rem; */
		/* display: flex; */
		/* justify-content: space-between; */
	}

	.carNum {
		border: 1px solid black;
		width: 1.8rem;
		height: 2.6rem;
		margin-top: 0.2rem;
		text-align: center;
		line-height: 2.6rem;
	}

	/* .carNum:hover {
		border: 1px solid red;
	} */

	.isNumClick {
		border: 1px solid red;
	}

	/* .carNum:hover ~ #two { background-color: yellow; } */


	.bottom {
		margin: 0 auto;
		margin-top: 5rem;
		margin-bottom: 3rem;
		bottom: 7rem;
		width: 90%;
		height: 3rem;
		background-color: #18ab4e;
		color: white;
		line-height: 3rem;
		font-size: x-large;
		text-align: center;
		border-radius: 1rem;
	}

	.bottom-after {
		margin: 0 auto;
		margin-top: 7rem;
		margin-bottom: 3rem;
		bottom: 7rem;
		width: 90%;
		height: 3rem;
		color: white;
		line-height: 3rem;
		font-size: x-large;
		text-align: center;
		border-radius: 1rem;
		background-color: #b4bdcb;
	}
</style>
